<template>
  <div>
    <a-row :gutter="40">
      <a-col :span="24">
        <div class="finder">
          <div class="finder__outer">
            <div class="finder__inner">
              <div class="clock"><Clock /></div>
              <p>你好，欢迎使用耀辉志昊工作平台！</p>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <!-- <index-chart v-if="indexStyle==1"></index-chart>
    <index-bdc v-if="indexStyle==2"></index-bdc>
    <index-task v-if="indexStyle==3"></index-task>
    <div style="width: 100%;text-align: right;margin-top: 20px">
      请选择首页样式：
      <a-radio-group v-model="indexStyle">
        <a-radio :value="1">统计图表</a-radio>
        <a-radio :value="2">统计图表2</a-radio>
        <a-radio :value="3">任务表格</a-radio>
      </a-radio-group>
    </div> -->
  </div>
</template>

<script>
  import IndexChart from './IndexChart'
  import IndexTask from './IndexTask'
  import IndexBdc from './IndexBdc'
  import Clock from '@/components/Clock'
  export default {
    name: 'Analysis',
    components: {
      IndexChart,
      IndexTask,
      IndexBdc,
      Clock
    },
    data() {
      return {
        indexStyle: 1
      }
    },
    created() {

    },
    methods: {

    }
  }
</script>
<style lang="less" scoped>
  .finder {
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 15px;
    padding: 8px;
    box-shadow: 9px 9px 16px rgba(189,189,189,0.6), -9px -9px 16px rgba(255,255,255,0.5);
    &:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient( 120deg, transparent, rgba(232, 231, 238, 0.6), transparent );
    transition: all 650ms;
    }
    &:hover:before{
      left: 100%;
    }
}
.finder__outer {
    display: flex;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    box-shadow: inset 10px 10px 15px -10px #f6f5f5, inset -10px -10px 15px -10px rgb(250, 243, 243);
}
.finder__inner {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    .clock{
      position: absolute;
      right: 5px;
      top:-5px;
    }
    p{
      display: flex;
      flex: 1;
      font-size: 1.5rem;
      letter-spacing: .75px;
      margin-top: 1em;
      margin-bottom: 1em;
    }
}
</style>
